

<template>
<!--  <el-affix target=".affix-container" :offset="10">-->
    <div id="bodyMenu">
      <div @click="toUrl('user')">个人中心</div>
      <div v-if="!login" @click="toUrl('login')" >登录</div>
      <div v-if="login" @click="logout" >注销</div>
    </div>
<!--  </el-affix>-->

</template>
<script setup>
import {router} from "../../router/index.js";
import {onMounted, ref} from "vue";
import {toStore} from "../../stores/counter.js";
const toUrl=(name)=>{
  router.push({
    name:name
  })
}

const login=ref(false)

const logout=()=>{
  login.value=false
  const store = toStore()
  store.token=""
  localStorage.setItem("store",JSON.stringify(store))
}
onMounted(()=>{
  const store = toStore()
  login.value=store.token!==""
})
</script>
<style lang="scss" scoped>
#bodyMenu{
  height: 40px;
  display: flex;
  border-bottom: 1px solid #1a1a1a;
  div{
    width: 100%;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    transition: 200ms;
  }
  div:hover{
    background-color: #eee;
  }
}
</style>